{% block sw_media_modal_move %}
<sw-modal
    variant="default"
    class="sw-media-modal-move"
    :title="$tc('global.sw-media-modal-move.titleModal', { mediaName: mediaNameFilter(itemsToMove[0]), count: itemsToMove.length })"
    @modal-close="closeMoveModal"
>

    {% block sw_media_modal_body %}
    {% block sw_media_modal_move_breadcrumbs %}
    <div class="sw-media-modal-move-folder-breadcrumbs">
        <img
            :src="assetFilter('/administration/administration/static/img/media/folder-thumbnail.svg')"
            class="sw-media-modal-move__folder-icon"
            alt="Folder thumbnail"
        >

        <button
            v-if="parentFolder && parentFolder.id !== targetFolder.id"
            class="sw-media-modal-move__breadcrumb-btn --parent"
            @click="onSelection(parentFolder)"
        >
            <mt-icon
                class="sw-media-folder-content__switch-button"
                name="regular-chevron-right-xs"
                size="10px"
            />
            {{ parentFolder.name }}
        </button>

        <button
            v-if="displayFolder && displayFolder.id !== targetFolder.id"
            class="sw-media-modal-move__breadcrumb-btn"
            @click="onSelection(displayFolder)"
        >
            <mt-icon
                class="sw-media-folder-content__switch-button"
                name="regular-chevron-right-xs"
                size="10px"
            />
            {{ displayFolder.name }}
        </button>

        <button
            v-if="targetFolder"
            class="sw-media-modal-move__breadcrumb-btn --target"
            @click="onSelection(targetFolder)"
        >
            <mt-icon
                class="sw-media-folder-content__switch-button"
                name="regular-chevron-right-xs"
                size="10px"
            />
            {{ targetFolder.name }}
        </button>
    </div>
    {% endblock %}
    <sw-media-folder-content
        :start-folder-id="displayFolderId"
        :selected-id="targetFolderId"
        @selected="onSelection"
    />
    {% endblock %}

    {% block sw_media_modal_footer %}
    <template #modal-footer>
        {% block sw_media_modal_move_cancel_button %}
        <mt-button
            size="small"
            variant="secondary"
            @click="closeMoveModal"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_media_modal_move_confirm_button %}
        <mt-button
            class="sw-media-modal-move__confirm"
            size="small"
            variant="primary"
            :disabled="isMoveDisabled"
            @click="moveSelection"
        >
            {{ $tc('global.sw-media-modal-move.buttonMove') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}
</sw-modal>
{% endblock %}
